import {messages} from "share/common";
/**
 * created by zt on 2018/04/20
 */
import React from 'react';
import {Card, Spin, Col, Row, Tooltip} from 'antd';
import 'styles/setting/configuration-center/configuration-center.scss';
import ConfigurationCenterService from 'containers/setting/configuration-center/configuration-center.service';

import {connect} from "react-redux";
import menuRoute from "routes/menuRoute";


class ConfigurationCenter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,  // 加载状态
      data: [], // 数据
      query: {} // 查询条件对象
    }
  }

  componentWillMount() {
    this.initConfigurationQuery();
  }

  componentDidMount() {
    this.getData();
  }

  // 初始化后台查询值
  initConfigurationQuery = () => {
    this.setState({
      query: {
        page: 0,
        size: 1000,
        tenantId: this.props.tenantInfo.id, // 租户id
        getDetail: 'N' // 获取配置项详情
      }
    })
  };

  // 获取后台数据
  getData = () => {
    const {query} = this.state;
    this.setState({
      loading: true
    });
    ConfigurationCenterService.getConfigurationList(query).then(res => {
      this.setState({
        data: res.data,
        loading: false
      });
    });
  };

  // 进入配置项详情
  goDetail = (item) => {
    this.context.router.push(menuRoute.getMenuItemByAttr('configuration-center', 'key').children.configurationDetail.url.replace(':id', item.configItem.id));
  };

  // 获取操作按钮信息
  getActions = (item) => {
    const actions = [
      (
        <div className="set-btn" onClick={() => this.goDetail(item)}>
          {/* 前往设置 */}
          {/*{messages("configure.center.btn.set")}*/} {messages('setting.key267'/*前往设置*/)}
        </div>
      )];

    let unsetTip = (
      <div className="unset-text">
        <span className="circle-tip">●</span>
        {/*未设置*/} {messages('setting.key268'/*未设置*/)}
        {/*{messages("configure.center.unset")}*/}
      </div>
    );
    // item.unsettled  为设置
    if (item.unsettled === 'N') {
      unsetTip = '';
    }
    actions.unshift(unsetTip);
    return actions
  };

  render() {
    const {loading, data} = this.state;
    return (
      <div className="configuration-center">
        {loading ? <Spin size="small"/> : (
          <Row gutter={16}>
            {
              data.rows.map(item =>
                <Col span={8} className="card-wrap" key={item.configItem.id}>
                  <Card title={item.configItem.itemName} actions={this.getActions(item)} hoverable={true}>
                    <Tooltip placement="top" title={item.configItem.description}>
                      <div className="line-one">{item.configItem.description}</div>
                    </Tooltip>
                    <br/>
                    <Tooltip placement="top" title={item.configItem.defaultValueDesc}>
                      <div
                        className="line-one">{messages('setting.key269'/*默认规则*/)}{/* 默认规则 */}:{item.configItem.defaultValueDesc}</div>
                    </Tooltip>
                  </Card>
                </Col>
              )
            }
          </Row>
        )}
      </div>
    )
  }
}

ConfigurationCenter.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    tenantInfo: state.login.tenant
  }
}

export default connect(mapStateToProps)(ConfigurationCenter);
